<script setup lang="ts">
import { useStationsStore } from '@/store'

type Item = {
  title: string
  value: string
}

interface StationInfo {
  name: Item
  Antenna: Item
  SatelliteSystem: Item
  ClockType: Item
  Longitude: Item
  Latitude: Item
  Height: Item
}

const stationInfo = ref<StationInfo>({
  name: { title: '名称', value: '' },
  Antenna: { title: '天线', value: '' },
  SatelliteSystem: { title: '卫星系统', value: '' },
  ClockType: { title: '时钟系统', value: '' },
  Longitude: { title: '经度', value: '' },
  Latitude: { title: '纬度', value: '' },
  Height: { title: '高度', value: '' }
})

const stationsStore = useStationsStore()

watch(
  () => stationsStore.stationInfo,
  () => {
    stationInfo.value.Antenna.value = stationsStore.stationInfo.Antenna.Name
    stationInfo.value.name.value = stationsStore.stationInfo.name as string
    stationInfo.value.SatelliteSystem.value = stationsStore.stationInfo.Receiver.SatelliteSystem
    stationInfo.value.ClockType.value = stationsStore.stationInfo.Clock.Type
    stationInfo.value.Longitude.value = stationsStore.stationInfo.Longitude + '°'
    stationInfo.value.Latitude.value = stationsStore.stationInfo.Latitude + '°'
    stationInfo.value.Height.value = stationsStore.stationInfo.Height + ' m'
  },
  { immediate: true }
)
</script>

<template>
  <n-space vertical size="large">
    <div style="margin-bottom: 1vh">
      <n-card title="基站信息">
        <template #header-extra>
          <n-button type="primary" quaternary>详情</n-button>
        </template>
        <n-infinite-scroll style="height: 36vh" :distance="10">
          <n-list hoverable class="list-panel">
            <n-list-item>
              <template #prefix>
                <n-tag type="info" size="small">{{ stationInfo.name.title }}</n-tag>
              </template>
              <n-gradient-text type="info">{{ stationInfo.name.value }}</n-gradient-text>
            </n-list-item>
            <n-list-item>
              <template #prefix>
                <n-tag type="info" size="small">{{ stationInfo.Antenna.title }}</n-tag>
              </template>
              <n-gradient-text type="info">{{ stationInfo.Antenna.value }}</n-gradient-text>
            </n-list-item>
            <n-list-item>
              <template #prefix>
                <n-tag type="info" size="small">{{ stationInfo.SatelliteSystem.title }}</n-tag>
              </template>
              <n-gradient-text type="info">{{ stationInfo.SatelliteSystem.value }}</n-gradient-text>
            </n-list-item>
            <n-list-item>
              <template #prefix>
                <n-tag type="info" size="small">{{ stationInfo.ClockType.title }}</n-tag>
              </template>
              <n-gradient-text type="info">{{ stationInfo.ClockType.value }}</n-gradient-text>
            </n-list-item>
            <n-list-item>
              <template #prefix>
                <n-tag type="info" size="small">{{ stationInfo.Longitude.title }}</n-tag>
              </template>
              <n-gradient-text type="info">{{ stationInfo.Longitude.value }}</n-gradient-text>
            </n-list-item>
            <n-list-item>
              <template #prefix>
                <n-tag type="info" size="small">{{ stationInfo.Latitude.title }}</n-tag>
              </template>
              <n-gradient-text type="info">{{ stationInfo.Latitude.value }}</n-gradient-text>
            </n-list-item>
            <n-list-item>
              <template #prefix>
                <n-tag type="info" size="small">{{ stationInfo.Height.title }}</n-tag>
              </template>
              <n-gradient-text type="info">{{ stationInfo.Height.value }}</n-gradient-text>
            </n-list-item>
          </n-list>
        </n-infinite-scroll>
      </n-card>
    </div>
  </n-space>
</template>

<style lang="scss" scoped>
.n-card {
  width: 19vw;
  height: 40vh;
  background-color: transparent;
  --n-border-color: transparent;
  --n-padding-bottom: 0px;
}

.list-panel {
  width: 100%;
  background-color: transparent;
  --n-border-color: #034ba27c;
}
</style>
